<!-- 诗词管理 -->
<template>
    <div class="potestyle">
    <el-header style="background-color:#fff; text-align: right; font-size: 12px">
      <div class="toolbar">
          <div class="search">
              <el-input type="text" placeholder="请输入内容" v-model="search" clearable @clear="getusers" />
              <el-button @click="getsearch"><el-icon><search /></el-icon></el-button>
            </div>
            <el-button type="primary" @click="dialogTableVisible=true"> 新增数据</el-button>
      </div>
    </el-header>
    <div class="container">
        <el-table :data="tickList" height=620 style="padding: 10px 30px;">
        <el-table-column min-width="30%" prop="poetryId" label="poetryId" :show-overflow-tooltip="true">
          <template #default=scope >
            <el-input type="text" v-model="scope.row.poetryId" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.poetryId}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="30%" prop="name" label="name" :show-overflow-tooltip="true">
          <template #default=scope>
            <el-input type="text" v-model="scope.row.name" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="content" >
          <template #default=scope>
            <el-input type="textarea" rows="8" v-model="scope.row.content" v-show="scope.row.edit" />
            <span class="con" v-show="!scope.row.edit">{{scope.row.content}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="30%" prop="author" label="author" :show-overflow-tooltip="true">
          <template #default=scope>
            <el-input type="text" v-model="scope.row.author" v-show="scope.row.edit" />
            <span v-show="!scope.row.edit">{{scope.row.author}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="30%" prop="dynasty" label="dynasty"   >
          <template #default=scope>
            <el-input type="text" v-model="scope.row.dynasty" v-show="scope.row.edit" />
            <span  v-show="!scope.row.edit">{{scope.row.dynasty}}</span>
          </template>
        </el-table-column>
        <el-table-column   prop="shangxi" label="shangxi"   >
          <template #default=scope>
            <el-input type="textarea" rows="8" v-model="scope.row.shangxi" v-show="scope.row.edit" />
            <span class="con" v-show="!scope.row.edit">{{scope.row.shangxi}}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="fanyi" label="fanyi"   >
          <template #default=scope>
            <el-input type="textarea" rows="8" v-model="scope.row.fanyi" v-show="scope.row.edit" />
            <span class="con" v-show="!scope.row.edit">{{scope.row.fanyi}}</span>
          </template>
        </el-table-column>
        <el-table-column style="padding-left: 8px;" label="功能"  fixed="right" width="250">
          <template #default="scope">
            <el-button  size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="primary" size="mini" @click="save(scope.row)">保存</el-button>
    
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
      </el-table-column>
        </el-table>
    <div class="block">
    <!-- 分页 -->
    <el-pagination
      
      style="background-color:aliceblue;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pagenum"
      :page-sizes="[5, 8, 9]"
      :page-size='query.pagesize'
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total">
    </el-pagination>
    </div>
    
    </div>
    <!-- 增加数据 -->
    <el-dialog title="新增用户" v-model="dialogTableVisible">
      <div class="con">
        <div class="users">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="name" prop="name">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="content" prop="content">
        <el-input type="text" v-model="ruleForm.content" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="author" prop="author">
        <el-input v-model="ruleForm.author"></el-input>
      </el-form-item>
      <el-form-item label="dynasty" prop="dynasty">
        <el-input v-model="ruleForm.dynasty"></el-input>
      </el-form-item>
      <el-form-item label="shangxi" prop="shangxi">
        <el-input v-model="ruleForm.shangxi"></el-input>
      </el-form-item>      
      <el-form-item label="fanyi" prop="fanyi">
        <el-input v-model="ruleForm.fanyi"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
        </div>
    </div>
    </el-dialog>
    </div>
    </template>
    
    <script>
    
      export default {
        data() {
          var check = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请填写内容'));
            }
            callback()
          };

          return {
            search:'',
            tableData: [],
            dialogTableVisible:false,
            ruleForm: {
              openid: '',
              nickname: '',
              avatar: '',
              gender:'',
              birthday:''
            },
            query:{
              pagenum:1, //当前页码
              pagesize:5, //每页显示条数
              total:0
            },
    
            tickList:[],   //当前页数据
    
            rules: {
              name: [
                { validator: check, trigger: 'blur' }
              ],
              content: [
                { validator: check, trigger: 'blur' },
              ],
              author: [
                { validator: check, trigger: 'blur' },
                // {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
              ],
              dynasty:[
                { validator: check, trigger:'blur'}
              ],
              shangxi:[
                { validator: check, trigger:'blur'}

              ],
              fanyi:[
                { validator: check, trigger:'blur'}

              ],
            }
          }
        },
        methods: {
            //警告弹窗
            openDelConfirm() {
                return this.$confirm(`是否删除此条数据?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            },

          //检查token
          checktoken(){
            let token = localStorage.getItem('token')
            this.$axios({
              method:'post',
              url:'token',
              data:token,
              headers:{'Authorization': localStorage.getItem('token')}
            }).then(res=>{
              let {code,msg} = res.data
              if(code==401){
                this.$router.push({name:'login'})
                this.$message.error(msg)
              }
    
            })
          },
          //当前页数据
          getPageInfo(){
            //清空tickList中的数据
            this.tickList=[];
            // 获取当前页的数据
            for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
              //把遍历的数据添加到tickList里面
              if(this.tableData){
                let data = this.tableData[i]
                this.tickList.push(data);

              }
              //判断是否达到一页的要求
              if(this.tickList.length===this.query.pagesize)break;
            }},
          //当页码或页面大小改变时触发回调
          handleSizeChange(newSize) {
            this.query.pagesize = newSize
            this.getPageInfo()
    
          },
          handleCurrentChange(newPage) {
            this.query.pagenum=newPage
            this.getPageInfo()
    
          },
            //编辑用户数据
            edit(row){
              row.edit = true
    
            },
            //保存
            async save(row){
    
              let {data} = this.$axios.post('updatapote',row)
              console.log(data);
              row.edit = false
            },
            //搜索
            async getsearch(){
                let {data} = await this.$axios.post('searchpoet',{key:this.search})
                console.log(data);
                this.tableData = data.msg
                this.query.total = data.msg.length
                this.getPageInfo()  //获取当前页数据
            },
    
          //获取列表
            async getusers(){
                let {data} = await this.$axios.get('getpote')
                if(data.code == 200){
                    this.tableData = data.msg
                    this.query.total = data.msg.length
                    this.getPageInfo()  //获取当前页数据
                }
    
            },
            //删除
            async del({poetryId}){
            //   this.open()
                this.openDelConfirm().then(async () => {
                    
                    let {data} = await this.$axios.post('deletepote',{poetryId})
                    if(data.code==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                      this.getusers()
                    }
                }).catch(() => {
                })
            },



    //新增数据
            submitForm(formName) {  
            this.$refs[formName].validate(async (valid) => { 
              if (valid) {
                console.log(this.ruleForm)
                let {data} = await this.$axios.post('addpote',this.ruleForm)
                
                if(data.code==200){
                  this.getusers()
                  this.dialogTableVisible =false
    
                }
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
    
        },
        mounted(){
            this.getusers()
            this.checktoken()
        }
      };
    </script>
    <style scoped>
   
    .container{
        margin: 0 0;
        padding: 0 0;
    }
    .toolbar{
      display: flex;
      align-items: center;
      justify-content:space-between;
      height: 100%;
      right: 20px;
    }
    .search{
        display: inline-flex;
        align-items: center;
        margin-right: 20px;
      }
    .con{
          
          overflow:hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        .con:hover{
          overflow: none;
          text-overflow: unset;
          display: block;
        }
    </style>